<template>
  <div>
    <div id="tf"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      option: {
        title: {
          text: '本月工作任务进度',
          subtext: '任务进度条展示',
          left: 'center'
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '12%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return params[0].name + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#888888'
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: ["张三", "李四", "王二", "小李", "小万", "小赵"]
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#888888',
              fontSize: '12'
            },
          },
          data: [239, 181, 154, 144, 135, 117]
        }],
        series: [{
          name: '值',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: 'rgb(57,89,255,1)'
              }, {
                offset: 1,
                color: 'rgb(46,200,207,1)'
              }]),
            },
          },
          barWidth: 15,
          data: [239, 181, 154, 144, 135, 117]
        },
        {
          name: '背景',
          type: 'bar',
          barWidth: 15,
          barGap: '-100%',
          data: [239, 181, 154, 144, 135, 117],
          itemStyle: {
            normal: {
              color: 'rgba(24,31,68,1)',
              barBorderRadius: 30,
            }
          },
        },
        ]
      }
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      var myChart = this.$echarts.init(document.getElementById('tf'))
      window.onresize = myChart.resize
      myChart.setOption(this.option)
    }
  }
}
</script>
<style scoped>
#tf {
  width: 100%;
  height: 315px;
}
</style>